<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>产品列表</title>
		<link rel="stylesheet" href="./css/style.css">
		<script src="js/vue.min.js"></script>
		<script src="js/vue-resource.min.js"></script>
		<style type="text/css">
			.product-no {
				text-align: center;
				margin: 30% 0;
			}

			.product-no-img {
				width: 150px;
				display: inline-block;
			}

			.product-no-til {
				font-size: 13px;
				color: #9b9b9b;
				margin: 20px 0;
			}

			.product-no-btn {
				width: 48%;
				height: 45px;
				border-radius: 8px;
				margin: 20px auto;
				background: #191D80;
				color: #fff;
				font-size: 17px;
			}
		</style>
	</head>
	<body>
		<div id="product-list">
			<div id="" v-if="!productNo">
				<ul class="goods-ul">
					<li class="goods-list" v-for="(item,index) in productList">
						<h4 class="title">{{item.name}}</h4>
						<p class="time">质保截止日期：{{item.quality_time}}</p>
						<p>产品型号：{{item.model}}</p>
						<p>产品序列号：{{item.serial_number}}</p>
						<p>产品使用单位：{{item.company}}</p>
					</li>
				</ul>
				<div>
					<p class="footer">没有更多了</p>
				</div>
				<img class="icon_add" src="./img/icon_add.png" @click="toBindProduct">
			</div>

			<!-- 无绑定完成的产品的时候 -->
			<div class="product-no" v-if="productNo">
				<img class="product-no-img" src="img/blank.png">
				<p class="product-no-til">未绑定产品，暂无产品信息</p>
				<button class="product-no-btn" type="button" @click="toBindProduct">现在去绑定</button>
			</div>
		</div>

		<script>
			new Vue({
				el: '#product-list',
				data: {
					url: 'https://newwk.sjwke.com/app/index.php?i=62&c=entry&do=front&m=smc_zhongchou',
					user_id: '',
					productList: [],
					productNo:false
				},
				created() {
					this.findProdList()
				},
				methods: {
					// 去绑定产品序列号
					toBindProduct() {
						// window.location = './product_bind.html'
						window.location.href = "./product_bind.html";
					},

					// 查询已经绑定的产品接口
					findProdList() {
						this.getUsetInfo()
						this.$http.post(this.url, {
							op: 'product',
							user_id: this.user_id
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							if (res.body.status == 0) {
								this.productList = res.body.data
								this.productNo = false
							}else if(res.body.status == 1){
								this.productNo = true
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 获取用户信息
					getUsetInfo() {
						let that = this
						let userInfo = JSON.parse(window.localStorage.userInfo)
						that.user_id = userInfo.data.id
					}

				},

			})
		</script>
	</body>
</html>
